<template>
  <div>
    <van-tabbar
      v-model="active"
      route
      active-color="#ee0a24"
      inactive-color="#000"
    >
      <!-- 因为发生了重定向所以我现在要做的是把激活的样式显示出来 -->

      <van-tabbar-item
        replace
        to="/home/recommend"
        v-if="$route.meta.atpath == '/home/recommend'"
      >
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? index.active : index.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item
        replace
        to="/home/attentions"
        v-else-if="$route.meta.atpath == '/home/attentions'"
      >
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? index.active : index.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item
        replace
        to="/home/hot"
        v-else-if="$route.meta.atpath == '/home/hot'"
      >
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? index.active : index.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/" v-else>
        <span>首页</span>
        <template #icon="props">
          <img :src="props.active ? index.active : index.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item replace to="/classify">
        <span>分类</span>
        <template #icon="props">
          <img :src="props.active ? classify.active : classify.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item :badge="this.$store.state.shoppingamount>0?this.$store.state.shoppingamount:''" replace to="/shopping">
        <span>购物车</span>
        <template #icon="props">
          <img :src="props.active ? shopping.active : shopping.inactive" />
        </template>
      </van-tabbar-item>

      <van-tabbar-item badge="" replace to="/my">
        <span>我的</span>
        <template #icon="props">
          <img :src="props.active ? my.active : my.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";
export default {
  name: "Tabbar",

  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  watch: {
    $route(to, from) {
      // this.$route.meta.atpath
    },
    dots(val) {
      console.log(cal);
    },
  },
  data() {
    return {
      // 当前所在的二级路由
      location: "/home/recommend",
      active: 0,

      index: {
        active: require("../assets/indexb2.png"),
        inactive: require("../assets/indexb1.png"),
      },
      classify: {
        active: require("../assets/fl2.png"),
        inactive: require("../assets/fl1.png"),
      },
      shopping: {
        active: require("../assets/gwc2.png"),
        inactive: require("../assets/gwc1.png"),
      },
      my: {
        active: require("../assets/wd2.png"),
        inactive: require("../assets/wd1.png"),
      },
      // sgwc
      shoppingamount: "",
    };
  },
  created() {
    this.ming();
  },
  methods: {
    ming() {
      setTimeout(() => {
        if (this.$store.state.shoppingamount > 0) {
          this.shoppingamount = this.$store.state.shoppingamount;
          this.$forceUpdate();
        }
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.tabaer {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  .tabs {
    flex: 1;
  }
}
</style>
